/** 
  实习需求报名申请
*/
<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-between">
      <div>
        <span @click="goBack" class="p_cals">{{$t('requirement.registration')}}</span> / <span>{{$t('requirement.applyFor')}}</span>
      </div>
      <el-button @click="cancelDialog" type="text">{{$t('requirement.back')}}</el-button>
    </el-row>
    <p></p>
    <div >
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <el-row type="flex" class="row-bg" justify="space-between">
          <h2>{{$t('requirement.practice')}}</h2>
            
        </el-row>
        <hr style="border-top: 2px solid #eee;">
        <h3 style="margin-left:10px">{{$t('requirement.information')}}</h3>
        <table style="margin-left:10px"  class="table-style-baseinfo">
          <tr>
            <td class="text-right-background-color">{{$t('requirement.semester')}}:</td>
            <td class="text-left-background-none" colspan="3">{{dataForm.calendarName}}</td>
              
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.internship')}}:</td>
              <td class="text-left-background-none">{{dataForm.baseName}}</td>
              <td class="text-right-background-color">{{$t('requirement.namePost')}}:</td>
              <td class="text-left-background-none">{{dataForm.positionName}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.college')}}:</td>
              <td class="text-left-background-none">{{dataForm.collegeAcademy | collegeList(options.faculty)}}</td>
              <td class="text-right-background-color">{{$t('requirement.major')}}:</td>
              <td class="text-left-background-none">
                <!-- {{dataForm.major}} -->
                {{dataForm.major | collegeAcademyList(options.title)}}
                </td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{$t('requirement.demand')}}:</td>
            <td class="text-left-background-none"  >{{dataForm.personNum}}</td>
            <td class="text-right-background-color">{{$t('requirement.workplace')}}:</td>
            <td class="text-left-background-none"  >{{dataForm.workAddress}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color" >{{$t('requirement.treatment')}}:</td>
              <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.treatment}}</td>
          
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.dateOperat')}}:</td>
              <td class="text-left-background-none">{{dataForm.workTimeStart}}</td>
              <td class="text-right-background-color">{{$t('requirement.workingDate')}}:</td>
              <td class="text-left-background-none">{{dataForm.workTimeEnd}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color" >{{$t('requirement.requirement')}}:</td>
              <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.majorRequirements}}</td>
            
              
          </tr>
        
          <tr>
              <td class="text-right-background-color">{{$t('requirement.declarati')}}:</td>
              <td class="text-left-background-none" >{{dataForm.applyTimeStart}}</td>
              <td class="text-right-background-color">{{$t('requirement.reporti')}}:</td>
              <td class="text-left-background-none"  >{{dataForm.applyTimeEnd}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.accessory')}}:</td>
              <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">
                <!-- <p v-for="item in dataForm.fileList" :key="item.fileId"> -->
                  <a @click="download(dataForm.enclosureFileUrl)">{{dataForm.enclosureFileName}}</a>
                <!-- </p> -->
              </td>
          </tr>
        </table>
        <p style="margin-left:10px" class="base-info-title">{{$t('requirement.studentInforma')}}</p>
      <!-- <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin"> -->
        
        <table style="margin-left:10px" class="table-style-baseinfo">
          <tr>
              <td class="text-right-background-color">{{$t('internProgress.name')}}:</td>
              <td class="text-left-background-none">{{dataFormList.studentName}}</td>
              <td class="text-right-background-color">{{$t('internProgress.studentNumber')}}:</td>
              <td class="text-left-background-none">{{this.id}}</td>
              <!-- <td class="text-left-background-none">{{dataFormList.studentId}}</td> -->
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('internProgress.college')}}:</td>
              <td class="text-left-background-none">{{dataFormList.faculty | collegeList(options.faculty)}}</td>
              <!-- <td class="text-left-background-none">{{dataFormList.facultyI18n}}</td> -->
              <td class="text-right-background-color">{{$t('internProgress.profession')}}:</td>
              <td class="text-left-background-none">{{dataFormList.profession|collegeAcademyList(options.title)}}</td>
              <!-- <td class="text-left-background-none">{{dataFormList.professionI18n}}</td> -->
          </tr>
          <tr>
            <td class="text-right-background-color">{{$t('internProgress.trainingLevel')}}:</td>
            <td class="text-left-background-none"  >{{dataFormList.trainingLevel|collegeList(options.TrainingLevel)}}</td>
            <!-- <td class="text-left-background-none"  >{{dataFormList.trainingLevelI18n}}</td> -->
            <td class="text-right-background-color">{{$t('internProgress.cultivationCategory')}}:</td>
            <!-- <td class="text-left-background-none"  >{{dataFormList.trainingCategoryI18n}}</td> -->
            <td class="text-left-background-none"  >{{dataFormList.trainingCategory|collegeList(options.trainingCategory)}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('internProgress.degreeType')}}:</td>
              <!-- <td class="text-left-background-none">{{dataFormList.degreeTypeI18n}}</td> -->
              <td class="text-left-background-none">{{dataFormList.degreeType|collegeList(options.degreeType)}}</td>
              <td class="text-right-background-color">{{$t('internProgress.waysOfLearning')}}:</td>
              <!-- <td class="text-left-background-none">{{dataFormList.formLearningI18n}}</td> -->
              <td class="text-left-background-none">{{dataFormList.formLearning|collegeList(options.formLearning)}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('internProgress.grade')}}:</td>
              <td class="text-left-background-none">{{dataFormList.grade}}</td>
              <td class="text-right-background-color">{{$t('internProgress.mentor')}}:</td>
              <td class="text-left-background-none">{{dataFormList.teacher}}</td>
          </tr>
         
        </table>
        <el-form :model="formInline" ref='formInline' :rules='rules' label-width="90px" class="demo-form-inline">
          <el-form-item :label="$t('requirement.specialty')" prop="pecialSkill">
            <el-input
              type="textarea"
              :placeholder="$t('internship.pleaseEnter')"
              v-model="formInline.specialSkill"
              :rows="6"
              maxlength="1000"
            >
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('requirement.bearFruit')" prop="achievements">
            <el-input
              type="textarea"
              :placeholder="$t('internship.pleaseEnter')"
              v-model="formInline.achievements"
              :rows="6"
              maxlength="1000"
            >
            </el-input>
          </el-form-item>
         
        </el-form>
        <el-row type="flex" class="row-bg" justify="end">
          <el-button @click="cancelDialog" >{{$t('requirement.cancel')}}</el-button>
          <!-- <el-button type="danger"  @click="conserve">{{$t('requirement.save')}}</el-button> -->
          <el-button type="danger"  @click="affirmForm" >{{$t('requirement.submit')}}</el-button>
        </el-row>
      </el-card>
      <el-dialog
        width="25%"
        ref="innerDialog"
        :title="$t('graduateBase.prompt')"
        :visible.sync="innerVisible"
        append-to-body
        :top="'28vh'">
        <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
        <div style="text-align: right;">
          <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
          <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
          <el-button type="primary" @click="confirmAndClose">{{$t('graduateBase.saveAndClose')}}</el-button>
        </div>
      </el-dialog>
    </div>
    
    </div>
</template>
<script>
// import InnovationEntrepreneurshipPracticeApi from "common/src/api/innovative/InnovationEntrepreneurshipPractice";
import {downloadfile} from "common/src/api/upload";
import HistoryTable from 'common/src/views/graduateStudent/component/HistoryTable';
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  // props: {
  //   details: {
  //     type: String
  //   },
  //   showFlag: {
  //     type: Boolean,
  //     default: false
  //   },
  //   dataListProp: {
  //     type: Object
  //   }
  // },
  // components: {
  //   HistoryTable
  // },
  data() {
    let cannotEnterName = (rule, value, callback) => {
      let reg = /[`$]/im;
      if (reg.test(value)) {
        return callback(new Error(this.$t('identificationToDoList.cannotContain')));
      } else 
      return callback();
    };
    return{
      queryForm: {}, //接收路由跳转的数据
      showTable: true,
      innerVisible: false,
      expand: true,
      internshipDemand: '',
      formInline: {
        specialSkill: '',
        achievements: ''
      },
      dataFormList: {},
      dataForm: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      }, //表格数据
      internship: {
        opinion: ''
      },
      curCheckStandard: '',
      curPracticeId: '',
      options: {
        TrainingLevel: [],
        title: [],
        degreeType: [],
        formLearning: [],
        faculty: [],
        profession: [],
        profesList: [],
        trainingCategory: []
      },
      rules: {
        achievements: [
          { validator: cannotEnterName, trigger: 'blur' }
        ],
        pecialSkill: [
          { validator: cannotEnterName, trigger: 'blur' }
        ]
      },
      id: '',
      name: '',
      tableData: []
    }
  },
  filters: {
    collegeList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    },
    collegeAcademyList(val, array) {
      let list = [];
      let str = [];
      if (val) {
        list = val.split(',');
        list.forEach(el => {
          array.forEach(ele => {
            if (el == ele.value) {
              str.push(ele.label);
            }
          });
        });
        return str.join();
      }
    }
  },
  mounted() {
    this.getOptions();
    this.dataForm = this.$route.query.row;
    this.assignment(this.$route.query.row.id);
    
  },
  created() {
    graduateStudent.getSession().then(res => {
      this.id = res.data.realUid;
      this.name = res.data.session.mockName;
    }).then(() => {
      this.getStuDetailBy();
    });
    // this.dataForm = this.$route.query.data;
    // console.log(this.dataForm, 'this.dataForm');
    
    // this.tableData = this.$route.query.list;
    // console.log(this.$route.query, 'dataListProp');
  },
  methods: {
    download (path) {
      downloadfile(path);
    },
    // 返回
    cancelDialog() {
      let isEmpty = true;
      for (let key in this.formInline) {
        if (this.formInline[key]) {
          isEmpty = false;
        }
      }
      if (isEmpty) {
        this.innerVisible = false;
        this.goBack();
      } else {
        this.innerVisible = true;
      }
    },
    // 提交
    affirmForm() {
      this.$refs['formInline'].validate(valid => {
        if (valid) {
          let listDate = [];
          let obj = {
            needsId: this.$route.query.row.id,
            studentId: this.id,
            achievements: this.formInline.achievements,
            specialSkill: this.formInline.specialSkill,
            studentName: this.name
          };
          listDate.push(obj);
          graduateStudent.positionApplyAddApply(listDate).then(() => {
            // this.$message(this.$t('internship.successfully'));
            this.goBack();
          });;
        }
      });
    },
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ['X_YX', 'G_ZY', "X_PYCC", 'X_PYLB', 'X_XWLX', 'X_XXXS']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            trainingCategory: "X_PYLB",
            title: "G_ZY",
            degreeType: "X_XWLX",
            formLearning: "X_XXXS",
            faculty: "X_YX",
            TrainingLevel: "X_PYCC"
          },
          res.data,
          this.options
        );
        // console.log(this.options);
        
      });
    },
    goBack() {
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
    },
    // 获取学生信息
    getStuDetailBy() {
      let obj = {
        id: this.id
      };
      graduateStudent.getStuDetailByClass(obj).then(res => {
        this.dataFormList = res.data[0];
        // this.dataFormList = res.data;
        // console.log(res, 'sfds');
        
      });
    },
    // 内层弹出确定
    confirmInner() {
      this.innerVisible = false;
      this.formInline.specialSkill = '';
      this.formInline.studentName = '';
      this.$refs['formInline'].resetFields();
      this.goBack();
    },
    // 内层弹出取消
    cancelInner() {
      this.innerVisible = false;
    },
    // 内层弹出保存关闭
    confirmAndClose() {
      this.innerVisible = false;
      this.affirmForm();
    },
    // 获取表格数据
    assignment(id) {
      graduateStudent.pgetDetailNeeds(id).then(res => {
        // console.log(res);
        this.dataForm = res.data;
      });
    },
    getActDetail(id) {
      graduateStudent.getActDetailNeeds(id).then(res => {
        // console.log(res);
        // this.dataForm = res.data;
      });
    },
  },
}
</script>
<style scoped>

.p_cals:hover{
  cursor: pointer;
  color: #409eff;
}
.p_cals{
  color: #aaa
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-margin {
  .title-container {
    display: flex;
    align-items: center;
    .audit-title {
      font-size: 16px;
    }
  }
}
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>